<template>
	<view class="address-edit">
		<view class="content">
			<!-- 输入框组 -->
			<van-cell-group>
				<van-field :value="formInput.userName" @change="handleValue('userName', $event)" label="姓名" placeholder="收货人姓名" clearable />

				<van-field :value="formInput.userPhone" @change="handleValue('userPhone', $event)" type="number" label="电话" placeholder="收货人手机号" clearable />

				<van-cell title="地区">
					<picker mode="region" :value="region" @change="regionChange">
						<view class="city" v-if="!region.length">请选择省/市/区</view>
						<view class="city2" v-else>{{ region.join('/') }}</view>
					</picker>
				</van-cell>

				<van-field
					:value="formInput.detailAddress"
					@change="handleValue('detailAddress', $event)"
					type="textarea"
					label="详细地址"
					placeholder="街道门排, 楼层房间号等信息"
					clearable
				/>

				<van-cell class="default" title="设为默认收货地址"><switch :checked="formInput.defaultFlag" @change="switchChange" /></van-cell>
			</van-cell-group>

			<van-button :loading="state.loading" color="#1baeae" round block @click="saveAddress">保存</van-button>

			<van-button round block v-if="id" @click="onDelete">删除</van-button>
		</view>
	</view>
</template>

<script setup>
// vue3小程序生命周期函数
import { onShareAppMessage, onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { reactive, toRefs } from 'vue'
import { addAddress, DeleteAddress, EditAddress, getAddressDetail } from '../../api/modules/address';

const state = reactive({ 
	loading: false,
	formInput: {
		userName: '',
		userPhone: '',
		detailAddress: '',
		defaultFlag: 0
	}, 
	region: [],
	id: ''
})

// 初始化方法
const init = async () => {
	// 1. 显示加载
	uni.showLoading({ title: '加载中...', mask: true })
	// 2. 加载数据
	const { data } = await getAddressDetail(state.id)
	state.formInput = data
	state.region = [data.provinceName, data.cityName, data.regionName]
	uni.hideLoading()
}

// 输入框双向绑定
const handleValue = (key, e) => {
	const value = e.detail
	console.log(key, value)
	state.formInput[key] = value
}

// 省市区选择
const regionChange = (e) => {
	const value = e.detail.value
	state.region = value
	// 保存省市区字段
	state.formInput.provinceName = value[0]
	state.formInput.cityName = value[1]
	state.formInput.regionName = value[2]
}

// 修改默认
const switchChange = (e) => {
	state.formInput.defaultFlag = e.detail.value - 0
}

// 保存地址
const saveAddress = async () => {
	// 判断值的有效性
	const { userName, userPhone, detailAddress } = state.formInput
	if (!userName.trim().length) return uni.$Toast('姓名不能为空')
	if (!/1[3456789]\d{9}/.test(userPhone)) return uni.$Toast('请填写正确的手机号')
	if (!state.region.length) return uni.$Toast('请选择省市区')
	if (detailAddress.length < 6) return uni.$Toast('详情地址最少6个字符')
	state.loading = true
	try{
		// 根据操作类型 调用不同接口
		state.id ? await EditAddress(state.formInput) : await addAddress(state.formInput)
		uni.$Toast('操作成功')
		state.loading = false
		setTimeout(() => {
			uni.navigateBack()
		}, 500)
	}catch(e){
		state.loading = false
	}
}

// * 删除地址
const onDelete = async () => {
	await DeleteAddress(state.id)
	uni.$Toast('删除成功')
	setTimeout(() => {
		uni.navigateBack()
	}, 500)
}


// 页面加载
onLoad(message => {
	// 1. 获取页面参数
	const { id } = message
	// 2. 保存页面参数
	state.id = id
	// 3. 动态修改标题
	uni.setNavigationBarTitle({ title: id ? '新增地址' : '修改地址'})
	// 4. 初始化
	if (id) {
		init()
	}
})

// 页面显示
onShow(() => {})

// 页面隐藏
onHide(() => {})

// 页面分享(不定义该函数 页面将无法分享)
onShareAppMessage(() => {})

const { formInput, region, id } = toRefs(state)
</script>

<style lang="scss">
.content {
	padding: 24rpx;
	.van-cell__title {
		max-width: 180rpx !important;
		color: #646566;
		margin-right: 24rpx;
	}
	.default .van-cell__title {
		max-width: 100% !important;
	}
	.city {
		color: #ccc;
		text-align: left;
	}
	.city2 {
		color: #000;
		text-align: left;
	}
	switch {
		transform: scale(0.8);
	}
	.van-button {
		margin-top: 36rpx;
	}
}
</style>
